<template>
  <div class="flex-row auto" >
    <validator name='m' @valid="mValid(true)"  @invalid="mValid(false)">
    <div class="thumbnail" >
      <avatar-upload :img-src.sync="row.img.content" :filename.sync="row.img.filename"></avatar-upload>
    </div>
    <form class="form-horizontal user-meter-padding" style="flex: 1;">
      <div class="row auto">
        <div class="form-group form-input-group col-sm-4" :class="[$m.meternumber.required ? 'has-error' : '']">
           <!-- v-validate:f_meternumber='{required: true }'  -->
          <label for="f_meternumber" class="control-label">表号</label>
          <!-- <div class="col-sm-3" :class="[(row.f_meternumber && row.f_meternumber.length > 0 ? true : false )? '' : 'has-error']">
            <input type="text" class="form-control" v-model="row.f_meternumber" placeholder='表号' v-next-el="{id: $index+'metertitles'}"
            @input="$dispatch('self-validator')">
          </div> -->
          <div class="col-sm-3">
            <input type="text" class="form-control" v-model="row.f_meternumber" v-validate:meternumber='{required: true }'  placeholder='表号' v-next-el="{id: 'metertitles'}">
          </div>
        </div>
        <div class="form-group form-input-group col-sm-4">
          <label for="f_metertitles" class="control-label">表封号</label>
          <div class="col-sm-3">
            <input type="text" class="form-control" v-model="row.f_metertitles" placeholder='表封号' v-next-el="{id: 'meterbase'}"   id="metertitles">
          </div>
        </div>
        <div class="form-group form-input-group col-sm-4">
          <label for="f_barcode" class="control-label">条码号</label>
          <div class="col-sm-3">
            <input type="number" class="form-control" v-model="row.f_barcode" placeholder='条码号'  id="meterbase">
          </div>
        </div>
      </div>
      <div class="row auto">
        <div class="form-group form-input-group col-sm-4">
          <label for="f_meter_base" class="control-label">表底数</label>
          <div class="col-sm-3 form-input-group">
            <input type="number" class="form-control" v-model="row.f_meter_base" placeholder='表底数'  id="meterbase" @blur="tablebaseChange()" :disabled="f_userinfo_id">
            <button type="button" name="button" class="btn btn-link" @click="modefiy('f_meter_base')" v-if="f_userinfo_id">修改</button>
          </div>
        </div>
        <div class="form-group form-input-group col-sm-4">
          <label for="gasbrand" class="control-label">气表品牌</label>
          <div class="col-sm-3" :class="[$m.brand.required ? 'select-error' : '']">
            <input type="text" v-show="false" v-model="$refs.brand.selectedItems" v-validate:brand='{required: true }'>
            <v-select :value.sync="row.gasbrand" :options='meterbrands' placeholder='气表品牌' close-on-select
              @change='brandChange' v-model='row.gasbrand' v-ref:brand></v-select>
          </div>
        </div>
        <div class="form-group form-input-group col-sm-4">
          <label for="gasmodel" class="control-label">气表型号</label>
          <div class="col-sm-3" :class="[$m.model.required ? 'select-error' : '']">
            <input type="text" v-show="false" v-model="$refs.model.selectedItems"  v-validate:model='{required: true }'>
            <v-select :value.sync="row.gasmodel" :options='row.gasbrand[0].gasmodel' placeholder='气表型号' close-on-select
              v-model='row.gasmodel' :disabled= 'row.gasbrand.length === 0 ' v-ref:model></v-select>
          </div>
        </div>
      </div>
      <div class="row auto">
        <div class="form-group form-input-group col-sm-4">
          <label for="gasmodel" class="control-label">左右表</label>
          <div class="col-sm-3">
            <v-select :value.sync="row.f_aroundmeter" :options='aroundmeters' placeholder='左右表' close-on-select
              v-model='row.f_aroundmeter' ></v-select>
          </div>
        </div>
      <div class="form-group form-input-group col-sm-4">
        <label for="pricetype" class="control-label">气价类型</label>
        <div class="col-sm-3"  :class="[$m.type.required ? 'select-error' : '']">
          <input type="text" v-show="false" v-model="$refs.type.selectedItems"  v-validate:type='{required: true }'>
          <v-select :value.sync="row.pricetype" v-model="row.pricetype"
            :options='pricetypes' placeholder='气价类型'
            close-on-select  v-ref:type>
          </v-select>
        </div>
      </div>
      <div class="form-group form-input-group col-sm-4">
        <label for="pricename" class="control-label">气价名称</label>
        <div class="col-sm-3"  :class="[$m.name.required ? 'select-error' : '']">
          <input type="text" v-show="false" v-model="$refs.name.selectedItems"  v-validate:name='{required: true }' >
          <v-select :value.sync="row.pricename" v-model="row.pricename"
              :options='getPricenames(row.pricetype)' placeholder='气价名称'
              close-on-select  v-ref:name></v-select>
        </div>
      </div>
      </div>
      <div class="row auto">
        <div class="form-group form-input-group col-sm-4">
          <label for="f_remanent_gas" class="control-label">剩余气量</label>
          <div class="col-sm-3 form-input-group">
            <input type="number" class="form-control" v-model="row.f_remanent_gas" placeholder='剩余气量' :disabled="f_userinfo_id"></input>
            <button type="button" name="button" class="btn btn-link" @click="modefiy('f_remanent_gas')" v-if="f_userinfo_id">修改</button>
          </div>
        </div>
      <div class="form-group form-input-group col-sm-4">
        <label for="f_install_person" class="control-label">安装人</label>
        <div class="col-sm-3">
          <input type="text" class="form-control" v-model="row.f_install_person" placeholder='安装人'></input>
        </div>
      </div>
      <div class="form-group form-input-group col-sm-4">
        <label for="f_position" class="control-label">安装位置</label>
        <div class="col-sm-3">
          <v-select :value.sync="row.f_position" v-model="row.f_position"
              :options='positions' placeholder='安装位置'
              close-on-select>
          </v-select>
        </div>
      </div>
      </div>
        <div class="row auto">
          <div class="form-group form-input-group col-sm-4">
            <label for="f_install_date" class="control-label">安装日期</label>
            <div class="col-sm-3">
              <datepicker  placeholder="安装日期"
                v-model="row.f_install_date"
                :value.sync="row.f_install_date"
                :format="'yyyy-MM-dd HH:mm:ss'"
                >
              </datepicker>
            </div>
          </div>
          <div class="form-group form-input-group col-sm-4">
            <label for="f_gas_person" class="control-label">通气人</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" v-model="row.f_gas_person" placeholder='通气人'></input>
              <!-- <v-select :value.sync="row.f_gas_person" v-model="row.f_gas_person"
                  :options='gasperson' placeholder='通气人'
                  close-on-select></v-select> -->
            </div>
          </div>
          <div class="form-group form-input-group col-sm-4">
            <label for="f_gas_date" class="control-label">通气日期</label>
            <div class="col-sm-3">
              <datepicker  placeholder="通气日期"
                v-model="row.f_gas_date"
                :value.sync="row.f_gas_date"
                :format="'yyyy-MM-dd HH:mm:ss'"
                ></datepicker>
            </div>
          </div>
          </div>
          <div class="row auto">
            <div class="form-group form-input-group col-sm-4" style="align-items: center;">
              <label for="f_fire_state1" class="control-label">点火状态</label>
              <input type="checkbox" v-model="row.f_fire_state1" style="flex: inherit;width:18px;height:18px">
              <!-- <label class="radio-inline">
                 <strong>点火状态</strong><input type="checkbox" value="1" v-model="row.f_fire_state1">
              </label> -->
              <!-- <v-select :value.sync="row.f_fire_state1" v-model="row.f_fire_state1"
                  :options='fireState' placeholder='点火状态'
                  close-on-select>
                </v-select> -->
            </div>
          <div class="form-group form-input-group col-sm-4">
            <label for="f_inputtor" class="control-label">抄表员</label>
            <div class="col-sm-3">
              <v-select :value.sync="row.f_inputtor" v-model="row.f_inputtor"
                  :options='inputtores' placeholder='抄表员'
                  close-on-select></v-select>
            </div>
          </div>
        </div>
        <div class="row auto">
          <div class="form-group form-input-group col-sm-4">
            <div class="col-sm-4">
            </div>
            <div class="col-sm-8">
              <button type="button" name="button" class="btn btn-deafult btn-block" @click="$dispatch('delete-meter')" v-if="!row.f_table_state">
                <span class="glyphicon glyphicon-trash"></span>
              </button>
            </div>
          </div>
        </div>
      </form>
     </validator>
     <idverify :show.sync="show" @change-con="changeVal"></idverify>
    </div>
</template>

<script>
import AppData from '../../stores/AppData'
import * as Util from '../Util'

export default {
  title: '表具信息',
  data () {
    return {
      row: this.meter,
      show: false,
      isdecimal: '否',
      field: ''
    }
  },
  props: ['meter', 'usertype', 'isdecimal', 'gasproperties', 'valid', 'f_userinfo_id'],
  ready () {
    this.row = Object.assign(this.row, this.meter, {})
    this.isdecimal = this.row.gasbrand.length > 0 ? this.row.gasbrand.f_isdecimal : '否'
    this.row.valid = false
    // this.row.f_install_date = Util.toStandardTimeString()
    // this.row.f_gas_date = Util.toStandardTimeString()
    this.row.f_aroundmeter[0] = '左表'
    console.log(Util.toStandardTimeString())
  },
  methods: {
    tablebaseChange () {
      if (this.isdecimal === '是') {
        this.$set('row.f_meter_base', (this.row.f_meter_base - 0).toFixed(2))
        // this.row.f_meter_base = (this.row.f_meter_base - 0).toFixed(2)
      } else {
        this.$set('row.f_meter_base', (this.row.f_meter_base - 0).toFixed(0))
        // this.row.f_meter_base = (this.row.f_meter_base - 0).toFixed(0)
      }
    },
    brandChange (val) {
      console.log('气表品牌改变,,', val)
      this.isdecimal = val.length > 0 ? val[0].f_isdecimal : '否'
      this.tablebaseChange()
    },
    getPricenames (pricetype) {
      let rs = []
      // console.log('用户类型。。', this.usertype)
      // console.log('用户类型22。。', this.gasproperties)
      if (this.usertype.length === 1 && this.gasproperties.length === 1 && pricetype.length === 1) {
        // console.log('获取气价名称。。。。')
        rs = AppData.getPrice({f_user_type: this.usertype[0],
          f_gasproperties: this.gasproperties[0], f_price_type: pricetype[0]})
      }
      if (rs.length === 0) {
        this.model.f_price_name = ''
      }
      // this.pricenames = rs
      return rs
    },
    mValid (bool) {
      this.row.valid = bool
      this.$dispatch('self-valid')
    },
    // 带权限修改单值返回修改后得值和修改原因
    modefiy (field) {
      this.show = true
      this.field = field
    },
    changeVal (val, reason) {
      this.$set(`row.${this.field}_befor`, this.row[this.field])
      this.$set(`row.${this.field}`, this.isdecimal === '是' ? (val - 0).toFixed(2) : (val - 0).toFixed(0))
      this.$set(`row.${this.field}_reason`, reason)
      console.log('111111111111111111111', this.row)
    }
  },
  watch: {
    'meter' () {
      this.row = Object.assign(this.row, this.meter, {})
      this.isdecimal = this.row.gasbrand.f_isdecimal
      this.row.valid = false
    }
  },
  computed: {
    usertypes () {
      return AppData.getParam('用户类型')
    },
    pricetypes () {
      return AppData.getParam('气价类型')
    },
    // gasproperties () {
    //   return AppData.getParam('用气性质')
    // },
    positions () {
      return AppData.getParam('安装位置')
    },
    inputtores () {
      return AppData.getParam('抄表员')
    },
    // installperson () {
    //   return AppData.getParam('安装人')
    // },
    gasperson () {
      return AppData.getParam('通气人')
    },
    changetubeperson () {
      return AppData.getParam('改管人')
    },
    meterbrands () {
      return AppData.getGasbrand()
    },
    aroundmeters () {
      return AppData.getParam('左右表')
    }
  }
}
</script>
